<template>
  <div id="page">
    <a-form
      :model="formState"
      layout="horizontal"
      class="custom-form"
      :label-col="{ style: { textAlign: 'right', width: '160px',fontSize: '18px' } }"
    >
      <a-row :gutter="[24, 16]">
        <!-- 第一行 -->
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <a-form-item label="申请人类型" required>
            <a-select
              v-model:value="formState.applicantType"
              placeholder="请选择申请人类型"
            >
              <a-select-option value="main">主申请人</a-select-option>
              <a-select-option value="co">共同申请人</a-select-option>
              <a-select-option value="family">其他家庭成员</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <a-form-item label="家庭类型" required>
            <a-select
              v-model:value="formState.familyType"
              placeholder="请选择家庭类型"
            >
              <a-select-option value="talent">各类引进人才家庭</a-select-option>
              <a-select-option value="household">户籍家庭</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <a-form-item label="年龄" required>
            <a-input-number
              placeholder="请输入年龄"
              v-model:value="formState.age"
              :min="18"
              :max="100"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[24, 16]">
        <a-col :span="24">
          <a-form-item label="人才类型" required>
            <a-radio-group
              v-model:value="formState.talentType"
              style="width: 100%"
            >
              <div>
                <a-radio value="domestic"
                  >具有国家承认的国内院、校本科及以上学历并获得学士及以上学位</a-radio
                >
                <a-radio value="overseas"
                  >具有国家承认的境外院、校学士及以上学位</a-radio
                >
                <a-radio value="technical">中级及以上专业技术职称</a-radio>
                <a-radio value="skill">高级工及以上职业技能等级证书</a-radio>
                <a-radio value="greenCard">广州市人才绿卡主卡持卡人</a-radio>
              </div>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="[24, 16]">
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <a-form-item label="婚姻状态" required>
            <a-radio-group v-model:value="formState.maritalStatus">
              <a-radio value="single">未婚</a-radio>
              <a-radio value="married">已婚</a-radio>
              <a-radio value="widowed">丧偶</a-radio>
              <a-radio value="divorced">离异</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <a-form-item label="与主申请人关系" required>
            <a-radio-group v-model:value="formState.relationship">
              <a-radio value="self">本人</a-radio>
              <a-radio value="spouse">配偶</a-radio>
              <a-radio value="child">未成年子女</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <a-form-item label="是否是本市户籍" required>
            <a-radio-group v-model:value="formState.isLocalResident">
              <a-radio value="yes">是</a-radio>
              <a-radio value="no">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="16">
          <a-form-item label="户籍地址" required>
            <a-input
              v-model:value="formState.workUnit"
              placeholder="请输入户籍地址"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[24, 16]">
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <a-form-item label="本市是否有房产" required>
            <a-radio-group v-model:value="formState.hasHouse">
              <a-radio value="yes">是</a-radio>
              <a-radio value="no">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <a-form-item label="3年内是否有房产转移记录" required>
            <a-radio-group v-model:value="formState.hasHouseTransfer">
              <a-radio value="yes">是</a-radio>
              <a-radio value="no">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>

      </a-row>
      <a-row :gutter="[24, 16]">

        <a-col :span="24">
          <a-form-item label="是否享受过政策性住房" required>
            <a-radio-group v-model:value="formState.hasPolicyHouse">
              <a-radio value="yes">是</a-radio>
              <a-radio value="no"
                >否（主申请人及共同申请人在广州市未享受购买房改房、单位内部集资建房、安居房、经济适用住房、拆迁安置新社区住房、落实侨房政策专用房、限价房、配售型保障性住房等优惠政策）</a-radio
              >
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>


      <a-row :gutter="[24, 16]">
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <a-form-item label="养老保险累计缴纳月数" required>
            <a-input-number
              placeholder="请输入月数"
              v-model:value="formState.pensionInsurance"
              :min="0"
              :max="120"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <a-form-item label="养老保险中断补缴月数" required>
            <a-input-number
              placeholder="请输入月数"
              v-model:value="formState.pensionInsuranceBreak"
              :min="0"
              :max="120"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <!-- 日期选择示例 -->
      <a-row :gutter="[24, 16]">
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <a-form-item label="劳动合同开始时间" required>
            <a-date-picker
              v-model:value="formState.contractStart"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <a-form-item label="劳动合同结束时间" required>
            <a-date-picker
              v-model:value="formState.contractEnd"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 长文本项单独一行 -->
      <a-row :gutter="16">
        <a-col :span="16">
          <a-form-item label="工作单位" required>
            <a-input
              v-model:value="formState.workUnit"
              placeholder="请输入工作单位"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24" style="display: flex; justify-content: center;margin-top: 24px;">
          <a-button type="primary" @click="handleSubmit" style="width: 150px;">提交</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script setup >
import { ref, reactive } from "vue";

const formState = reactive({
  applicantType: undefined,
  familyType: undefined,
  age: undefined,
  maritalStatus: undefined,
  relationship: undefined,
  isLocalResident: undefined,
  talentType: undefined,
  contractStart: null,
  contractEnd: null,
  workUnit: "",
  // 其他字段...
});
const handleSubmit = () => {
  console.log(formState);
};
</script>

<style scoped>
.custom-form {
  width: 100%;
}

/* 对齐优化 */
.ant-form-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}

.custom-form .ant-form-item-label > label {
  flex: 0 0 150px; /* 固定标签宽度 */
  padding-right: 16px;
  font-size: 18px;
}

.ant-form-item-control {
  flex: 1;
}

/* 日期选择器宽度 */
.ant-picker {
  width: 100%;
}

/* 长文本输入项 */
.ant-input {
  width: 100%;
}

</style>